<template>
  <div
  >
    <el-upload

      v-if="!disabled"
      :before-upload="beforeUpload"
      :http-request="handleUploadSuccess"
      :file-list="fileList"
      :show-file-list="false"
      :accept="acceptTypeStr"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="handleExceed"
      action="#"
      class="upload-demo"
    >
      <span style="color:red"><i class="el-icon-plus"/>新增</span>

      <!-- <i class="el-icon-upload"/>
      <div class="el-upload-upload">拖拽文件到这里，或<em>点击选择文件</em></div> -->
    </el-upload>
    * 提示 视频需要额外传张视屏封面图
    <el-table
      :data="fileList"
      tooltip-effect="dark"
      highlight-current-row
      border
    >
      <el-table-column align="center" fixed label="序号" width="50" type="index"/>

      <el-table-column
        v-if="!disabled"
        prop="dtl_seq"
        label="操作"
        width="50">
        <div slot-scope="scope">
          <!-- @click="" fileList.splice((scope.index -1),1) -->
          <el-button class="el-icon-delete" size="mini" type="text" style="font-size: 20px;" @click="fileList.splice(scope.$index,1)" />
        </div>
      </el-table-column>
      <!-- <el-table-column align="center" fixed label="附件类型" width="100" type="index">
        <template slot-scope="scope">
          {{ scope.row.file_type ==='image'? '图片': '视频' }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="视频" width="50" type="index">
        <template slot-scope="scope">
          <div v-if="scope.row.file_type ==='image'"/>
          <div v-else>
            <!-- {{ scope.row.name }} -->
            <el-button class="el-icon-view" size="mini" type="text" style="font-size: 20px;" @click="dialogVisible4PreviewVedio= true;dialogVedioUrl4PreviewVedio =scope.row.file_url"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片/视频封面" width="300" type="index">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <div v-if="scope.row.file_type ==='image'">
            <img
              v-if="scope.row.file_url"
              :src="scope.row.file_url"
              style=" width: 50px; margin: 0 auto"
              @click="dialogVisible4PreviewImg= true;dialogImageUrl4PreviewImg =scope.row.file_url"
            >
          </div>
          <div v-else>
            <ImgItemSingle :disabled="disabled" :file-list.sync="scope.row.imgFileList" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="dtl_seq"
        label="排序"
        width="100">
        <div slot-scope="scope">
          <el-input :disabled="disabled" v-model="scope.row.dtl_seq" class="input1" placeholder="排序"/>
        </div>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible4PreviewImg"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl4PreviewImg"
        style="display: block; max-width: 100%; margin: 0 auto"
      >
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible4PreviewVedio"
      title="预览"
      width="800"
      append-to-body
    >
      <video id="video" :poster="dialogVedioPoster4PreviewVedio" controls width="800" height="480">
        <source :src="dialogVedioUrl4PreviewVedio" type="video/mp4">
      </video>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from '@/api/upload.js'

import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import Radio from '@/components/Radio/Radio'
import ImgItemSingle from './ImgItemSingle'

export default {
  components: {
    rSelect,
    BaseTable,
    ImgItemSingle,
    Radio
  },
  mixins: [formMixins],
  props: {
    disabled: Boolean,
    maxSize: {
      type: Number,
      default: 50 // mb
    },
    acceptTypeStr: {
      type: String,
      default: '.jpg,.png'
    },
    limit: Number,
    multiple: Boolean,
    fileList: Array
  },
  data() {
    return {
      // rowSeqIndex: 1,
      // uidBase64Map: new Map(), // file uid =>base64url
      dialogVisible4PreviewVedio: false,
      dialogVedioUrl4PreviewVedio: '',
      dialogVedioPoster4PreviewVedio: '',
      dialogVisible4PreviewImg: false,
      dialogImageUrl4PreviewImg: ''

    }
  },
  computed: {
    rowSeqIndex: function() {
      let currentMaxSeq = 0

      if (this.fileList) {
        this.fileList.forEach((item, index, arr) => {
          if (item.dtl_seq && Number(item.dtl_seq) > currentMaxSeq) {
            currentMaxSeq = Number(item.dtl_seq)
          }
        })
      }
      return currentMaxSeq + 1
    // this.rowSeqIndex = currentMaxSeq + 1
    }
  },
  // 初始化
  mounted() {
  },
  methods: {

    beforeUpload(file) {
      if (this.acceptTypeStr != null && this.acceptTypeStr !== '' && this.acceptTypeStr !== undefined && this.acceptTypeStr.indexOf(file.name.substring(file.name.lastIndexOf('.'), file.name.length)) < 0) {
        this.$message({
          type: 'error',
          message: `文件后缀需要为：${this.acceptTypeStr}`
        })
        return false
      }
      if (this.maxSize != null && this.maxSize !== '' && this.maxSize !== undefined && file.size / 1024 / 1024 > parseInt(this.maxSize)) {
        this.$message({
          type: 'error',
          message: '上传文件大小需小于' + this.maxSize + 'MB!'
        })
        return false
      }
    },
    handleUploadSuccess(param) {
      const that = this

      // console.log('param is ', param)
      // console.log('this.fileList is', this.fileList)

      const formData = new FormData()
      formData.append('file', param.file)

      uploadFile(formData).then((res) => {
        const tempObj = {}
        tempObj.dtl_seq = that.rowSeqIndex
        tempObj.file_url = res.file_id
        tempObj.file_type = param.file.name.endsWith('.mp4') ? 'video' : 'image'
        tempObj.file_upload_info_id = res.file_upload_info_id
        tempObj.name = res.name
        that.fileList.push(tempObj)
        if (tempObj.file_type == 'video') {
          that.$set(tempObj, 'imgFileList', [])
        }
        console.log(that.fileList)

        // param.dtl_seq = (that.rowSeqIndex++)
        // param.file_url = res.file_id
        // param.file = null // 移除文件
        // param.file_type = param.file.name.endsWith('.mp4') ? 'video' : 'image'
        // if (param.file_type == 'video') {
        //   that.$set(param, 'imgFileList', [])
        // }
        // param.file_upload_info_id = res.file_upload_info_id
        // param.name = res.name
        // that.fileList.push(param)
      })

      // param.dtl_seq = (this.rowSeqIndex++)
      // param.file_type = param.file.name.endsWith('.mp4') ? 'video' : 'image'
      // param.name = param.file.name
      // this.$set(param, 'imgFileList', [])
      // // if (param.file_type == 'image') {
      // //   this.reader.readAsDataURL(param.file)
      // //   const that = this
      // //   // 读取完成后触发
      // //   this.reader.onload = function() {
      // //     // that.$set(file, 'imgUrlTemp', this.result)

      // //     that.uidBase64Map.set(param.file.uid, this.result)
      // //     that.$set(param, 'fileReadReady', true)
      // //   }
      // // }
      // this.fileList.push(param)
    },
    handleExceed(arg1, arg2) {
      this.$message({
        type: 'warning',
        message: `超出限制条数${this.limit}!`
      })
    },

    removeFileOper(file, fileList) {
      console.log('fileList is ', fileList)
      console.log('file is ', file)
      // this.imgFile = []
    },
    // 返回清空列表
    clear() {
      this.type = ''
      this.$parent.searchHandle()
      this.$emit('update:showAdd', false)
    },

    handleExceed4VidoImg(arg1, arg2) {
      this.$message({
        type: 'warning',
        message: `视屏封面只允许限制条数!`
      })
    }

  }
}
</script>

<style scoped>

.input1 {
    min-height: 30px;
    margin: 0px;
    width: 50px;
}

.sizeTip{
    font-size: 10px;
    color: rgb(255, 0, 13);
    height: 7px;

  }
</style>
